<template>
  <div>
    <img src="/src/assets/error-1.png" class="errors">
    <div class="card-recommend">
      <div class="header">今日推荐</div>
      <mt-swipe :show-indicators="true" :auto="0" class="recommend-swipe">
        <mt-swipe-item v-for="(v, k) in cardSwipe" :key="k">
          <div class="swipe-flex">
            <div class="swipe-img-row"
              v-for="x in v" :key="x.id"
              @click="$router.push({name: 'BankCard', params: {id: x.id}})"
            >
              <img :src="x.card_image">
              <span class="name">{{x.card_name}}</span>
              <span class="desc">{{x.owners}}人拥有</span>
            </div>
            <div class="swipe-img-row" v-if="v.length % 3 === 2"></div>
          </div>
        </mt-swipe-item>
      </mt-swipe>
      <div class="line"></div>
      <div class="header">热门银行</div>
      <div class="bank-list" :class="{short: isShort}">
        <div class="item" v-for="v in bankList" :key="v.id" @click="routeToCardList('bank', v.id)">
          <img :src="v.image" class="logo">
          <span>{{v.name}}</span>
          <span class="desc">{{v.owners}}人拥有</span>
          <mt-badge v-if="v.tag" color="rgb(255, 89, 22)" class="bank-badge">{{v.tag}}</mt-badge>
        </div>
        <div class="looking-more" @click="changeLong">
          <span class="text">查看更多</span>
          <img src="/src/assets/icons/arrow-down.png" class="icon">
        </div>
      </div>
      <div class="line"></div>
      <div class="header">卡片专栏</div>
      <div class="card-column" v-for="(v, k) in columns" :key="k">
        <div class="column" v-for="(x, i) in v" :key="i" @click="routeToCardList('tags', x.id)">
          <div class="title">{{x.tag_name}}</div>
          <div class="desc">{{x.brief_introduction}}</div>
          <img :src="x.icon" class="icon">
        </div>
      </div>
      <div class="line"></div>
      <div class="header">卡片排名</div>
      <div class="card-list">
        <div class="item"
          v-for="(v, k) in ranking" :key="k"
          @click="$router.push({name: 'BankCard', params: {id: v.id}})"
        >
          <img class="image" :src="v.card_image">
          <div class="sub-item">
            <span class="title">{{v.card_name}}</span>
            <span class="desc" v-html="v.brief_introduction"></span>
          </div>
          <div class="icon" v-if="k < 3">{{k + 1}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import swipe from '@/components/swipe'

  export default {
    name: 'Phone',
    components: {
      swipe
    },
    data () {
      return {
        cardSwipe: [],
        bankList: [],
        isShort: true,
        columns: [],
        ranking: []
      }
    },
    methods: {
      changeLong () {
        this.isShort = false
      },
      routeToCardList (type, val) {
        this.$router.push({path: `/applyCard/${type}/${val}`})
      }
    },
    mounted () {
      // 获取今日推荐
      this.$post('/vue/request_card/get_today_recommend_list', '').then(data => {
        this.cardSwipe = data
      })
      // 获取卡片排名
      this.$post('/vue/request_card/get_list', '').then(data => {
        this.ranking = data.act_list
      })
      // 获取标签
      this.$post('/vue/request_card/get_tags', '').then(data => {
        this.columns = data
        let icons = [
          '/src/assets/icons/card.png',
          '/src/assets/icons/diamond.png',
          '/src/assets/icons/handbag.png',
          '/src/assets/icons/dice-one.png',
          '/src/assets/icons/plane-red.png',
          '/src/assets/icons/dice-two.png'
        ]
        for (let i = 0; i < this.columns.length; i++) {
          for (let j = 0; j < this.columns[i].length; j++) {
            this.columns[i][j]['icon'] = icons[i * i + j]
          }
        }
      })
      // 获取银行
      this.$post('/vue/request_card/bank_list', '').then(data => {
        this.bankList = data
      })
    }
  }
</script>

<style lang="less">
  @c-124: rgb(124, 124, 124);
  @c-169: rgb(169, 169, 169);
  @c-white: #FFFFFF;
  @bc-235: rgb(235, 235, 235);
  @full-width: 100vw;

  .line {
    height: 8px;
    background-color: rgb(240, 244, 247);
  }
  .errors {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1000;
  }
  .card-recommend {
    width: @full-width;
    text-align: left;
    background-color: #FFF;
    height: 100vh;
    overflow: hidden;
    .header {
      padding: 8px 12px;
      font-size: 12px;
      line-height: 24px;
      color: @c-124;
      border-bottom: 1px solid @bc-235;
    }
    .recommend-swipe {
      padding: 16px 18px 12px;
      height: 132px;
      box-sizing: content-box;
    }
  }
  .card-recommend .mint-swipe-items-wrap {
    padding-bottom: 12px;
    border-radius: 0;
  }
  .card-recommend .mint-swipe-indicators {
    font-size: 0;
    bottom: 11px;
  }
  .card-recommend .mint-swipe-indicator {
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background-color: rgb(160, 160, 160);
  }
  .card-recommend .mint-swipe-indicator.is-active {
    background-color: #000;
  }
  .card-recommend .swipe-flex {
    height: 100%;
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: space-between;
  }
  .card-recommend .swipe-flex .swipe-img-row {
    height: 100%;
    flex: 0 0 30%;
  }
  .card-recommend .swipe-img-row img {
    width: 100%;
    height: 48%;
    border-radius: 4px;
    display: block;
  }
  .card-recommend .swipe-img-row .name {
    padding-top: 8px;
    font-size: 13px;
    line-height: 24px;
    text-align: center;
    color: rgb(124, 124, 124);
    display: block;
  }
  .card-recommend .swipe-img-row .desc {
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    color: rgb(169, 169, 169);
    display: block;
  }
  /* ---热门银行列表--- */
  .bank-list {
    padding: 16px 16px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: space-between;
    overflow: hidden;
  }
  .bank-list.short {
    height: 340px;
    position: relative;
  }
  .bank-list .item {
    flex: 0 0 30%;
    text-align: center;
    margin-bottom: 16px;
    position: relative;
  }
  .bank-list .item .logo {
    width: 40px;
    height: 40px;
    display: block;
    margin: 0 auto;
  }
  .bank-list .item span {
    display: block;
    font-size: 13px;
    line-height:24px;
    font-weight: bold;
    color: rgb(124 ,124, 124);
  }
  .bank-list .item .desc {
    font-size: 12px;
    line-height: 20px;
    font-weight: normal;
    color: rgb(169, 169, 169);
  }
  .bank-list .item .mint-badge.bank-badge {
    width: 24px;
    height: 16px;
    padding: 0 4px;
    border-radius: 24px;
    font-size: 12px;
    line-height: 16px;
    color: #FFF;
    position: absolute;
    top: 0;
    right: 0;
    font-weight: normal;
  }
  /* ---查看更多--- */
  .bank-list .looking-more {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    background-color: #FFF;
    font-size: 0;
    padding-bottom: 16px;
    display: none;
  }
  .bank-list.short .looking-more {
    display: block;
  }
  .bank-list.short .looking-more .text {
    font-size: 12px;
    line-height:24px;
    color: rgb(108, 184, 222);
    display: inline-block;
    vertical-align: middle;
  }
  .bank-list.short .looking-more .icon {
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
  }
  /* ---卡片专栏--- */
  .flex {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: space-between;
  }
  .card-column {
    width: @full-width;
    padding: 8px 0;
    border-bottom: 1px solid @bc-235;
    .flex;
    &:last-child {
      border-bottom: 0;
    }
    .column { // 栏目
      padding: 0 12px;
      flex: 1;
      border-right: 1px solid @bc-235;
      position: relative;
      &:last-child {
        border-right: 0;
      }
      .title {
        display: block;
        color: @c-124;
        font-size: 13px;
        line-height: 24px;
        font-weight: bold;
        margin-bottom: 4px;
      }
      .desc {
        display: block;
        color: @c-169;
        font-size: 12px;
        line-height: 20px;
      }
      .icon {
        width: 24px;
        height: 24px;
        position: absolute;
        right: 12px;
        top: 0;
        bottom: 0;
        margin: auto;
      }
    }
  }
  /* ---卡片排名--- */
  .card-list {
    padding-left: 12px;
    .item {
      &:extend(.flex);
      padding: 12px 12px 12px 0;
      position: relative;
      .image {
        width: 33%;
        flex: 0 0 33%;
        display: block;
        margin-right: 10px;
      }
      .sub-item {
        flex: 1;
        .title {
          &:extend(.card-column .column .title);
          margin-bottom: 8px;
        }
        .desc {
          &:extend(.card-column .column .desc);
        }
      }
      .icon {
        width: 24px;
        height: 24px;
        background-image: url('/src/assets/icons/tag.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 0;
        right: 12px;
        &:extend(.card-column .column .desc);
        color: @c-white;
        text-align: center;
      }
    }
  }
</style>